import React, { Component } from 'react';
import '../styles/HotShow.scss'
import * as service from '../api/index'

class HotShow extends Component {
    state={
        hotshowlist:[]
    }
    async componentDidMount(){
        let res = await service.index_hotshowlist()
        // console.log(res.data.list);
        this.setState({hotshowlist:res.data.list})
    }
    render() {
        return (
            <div className='hotshow'>
                <div className="option">
                    <div className="title">
                        热门演出
                    </div>
                    <div className="watch">
                        查看全部
                    </div>
                </div>
                <div className="hotshowlist">
                    {
                        this.state.hotshowlist.map((item,index)=>{
                            return (
                                <div className="item">
                                    <img src={item.pic} alt="" />
                                    <div className="name">
                                        {item.name}
                                    </div>
                                    <div className="cate">
                                        {item.category}
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default HotShow;